import { List, InputItem,Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import React from 'react';
import { history } from 'react-router-dom'
import { withRouter } from 'react-router'

class H5NumberInputExample extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            error: false,
            pwd: '',
            username: ''
        }
        this.onChange = this.onChange.bind(this)
        this.onErrorClick = this.onErrorClick.bind(this)
        this.submit = this.submit.bind(this)
        this.getName = this.getName.bind(this)
    }
    getName(val) {
        this.setState({
            username: val
        })
    }
    onErrorClick() {
        if (this.state.error) {
            Toast.info('length must > 6')
        }
    }
    onChange(val) {
        if (val.replace(/\s/g, '').length < 6) {
            this.setState({
                error: true,
                pwd: val
            })
        } else {
            this.setState({
                error: false,
                pwd: val
            })
        }
    }
    submit() {
        const { history } = this.props
        Toast.info('submit')
        history.push('/index')
    }
    render() {
        const { getFieldProps } = this.props.form;
        const { type } = this.state;
        return (
            <div>
                <List>
                    <InputItem
                        {...getFieldProps('money3')}
                        type="text"
                        placeholder="name"
                        clear
                        onBlur={this.getName}
                        moneyKeyboardAlign="left"
                    >用户名</InputItem>
                    <InputItem
                        type="password"
                        placeholder="password"
                        clear
                        error={this.state.error}
                        onErrorClick={this.onErrorClick}
                        onChange={this.onChange}
                        onBlur={(v) => { console.log('onBlur', v); }}
                    >密码</InputItem>
                <List.Item>
                    <div
                        style={{ width: '100%', color: '#108ee9', textAlign: 'center' }}
                        onClick={() => this.submit()}
                    >
                    submit
                    </div>
                </List.Item>
                </List>
            </div>
        )
    }
}

const Login = withRouter(createForm()(H5NumberInputExample));
export default Login